Material Design 3 顏色的設定

在 Angular Material 的元件基本會有 color 屬性，而這個屬性只能使用在 Material Design 2 的樣式機制中。若要在 Material Design 3 使中使用不同的顏色樣式時，可以先在 style.scss 中加入樣式類別，如下面程式所示。

.secondary-button {
  @include mat.button-color(
    light-theme.$light-theme,
    $color-variant: secondary
  );
}

如此一來，就可以在使用 <mat-button> 時直接指定此樣式類別來改變按鈕顏色。進一步，我們也可以自訂一個 color 的指令元件，來統一控制要套用的顏色名稱。

<button
  mat-stroked-button
  class="secondary-button"
  (click)="switchView.emit(ViewType.Table)"
>
  表格
</button>

在元件內設定樣式

Angular Material 元件都有設定一樣式類別，來讓我們可以針對該元件進行設定。例如，<mat-raised-button> 元件可以使用 .mat-mdc-raised-button 來設定其樣式。而在 Table 元件中，則會依各欄位名稱來設定其樣式類別名為 mat-column-*，例如，欄位名為 id 的可以使用 .mat-column-id 來設定樣式。

接下來

明天我們來實作如何使用 Angular Material 來切換應用程式的樣式。